<template>
  <div>
    <!-- // 如果是有数据的话，就展示表格 -->
    <a-table
      v-if="dataSource.length > 0"
      :columns="columns"
      :dataSource="dataSource"
      bordered
      :pagination="false"
    />
    <!-- // 如果没有数据的话，就展示暂无数据 -->
    <div v-else style="text-align: center; margin-top: 20px">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRaw, ref, computed, watch, h } from 'vue';
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});
const columns = ref([]);
const dataSource = ref([]);

watch(
  () => props.data,
  (newVal) => {
    // 清空数据
    columns.value = [];
    dataSource.value = [];
    // 对应的key
    for (const key in newVal.operateContentEntity) {
      columns.value.push({
        title: key,
        dataIndex: key,
        key: key,
      });
    }
    // 对应的表格数据
    // 初始化一个空对象来存储一行数据
    const rowData = {};
    for (const key in columns.value) {
      const dataIndex = columns.value[key].dataIndex;
      // 将表头对应的内容添加到 rowData 对象中
      rowData[dataIndex] = newVal.operateContentEntity[dataIndex];
    }
    // 将生成的行数据添加到 dataSource 中
    dataSource.value.push(rowData);
  },
  {
    immediate: true,
  },
);
</script>

<style scoped></style>
